<template>
  <div
    @touchmove.prevent
    :class="$style.container"
    v-if="currentValue"
    @click="hide"
  >
    <div :class="$style.modal">
      <div :class="$style.couponText">
        <p>Shop now to get {{certificateData.showAmount}} off</p>
        <p>on your first order!</p>
      </div>
      <img v-if="certificateData.configList" :src="certificateData.configList[0].imageUrl">
    </div>
  </div>
</template>

<script>
export default {
  name: 'couponModal',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    certificateData: Object,
  },
  data() {
    return {
      currentValue: this.show,
    }
  },
  watch: {
    show(val) {
      this.currentValue = val
    },
  },
  methods: {
    hide() {
      this.currentValue = false
      this.$store.dispatch('closePopupModal')
    },
  },
}
</script>

<style module lang="scss">
.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .5);
  overflow: hidden;
  z-index: 3000;
}

.modal {
  position: absolute;
  width: 270px;
  height: 270px;
  left: 50%;
  top: 50%;
  margin-top: -135px;
  margin-left: -135px;
  background-image: url("assets/coupon/modal.png");
  background-size: 100% 100%;
  text-align: center;
  padding-top: 32px;
  img {
    width: 212px;
    height: 62px;
  }
}

.couponText {
  color: #D62122;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 14px;
}
</style>
